<template>
	<div class="app-container">
		<el-form ref="dataForm" :model="temp" label-position="left" label-width="130px" style='margin: auto; max-width: 1200px'>
			<el-row :gutter="24">
				<el-col :span="12">
					<el-form-item label="事件名称" prop="eventTitle">
						<el-input readonly v-model.trim="temp.eventTitle" type="text" placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="事件生命周期" prop="createTime">
						<el-date-picker readonly v-model="temp.createTime" type="datetime" placeholder=""></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="2">
					<span style="line-height: 39px;">——至今</span>
				</el-col>
				<el-col :span="12">
					<el-form-item label="事件标签">
						<el-tag v-for="tag in temp.listTags" :key="tag.keyword" type="info">{{ tag.keyword }}</el-tag>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="事件热度" prop="eventHot">
						<el-rate style="line-height: 45px;" v-model="temp.eventHot" disabled void-icon-class="el-icon-aliFirefire" disabled-void-icon-class="el-icon-aliFirefire" :colors="['#d81e06', '#d81e06', '#d81e06']" :icon-classes="['el-icon-aliFirefire-fill', 'el-icon-aliFirefire-fill','el-icon-aliFirefire-fill']">
						</el-rate>
					</el-form-item>
				</el-col>
	          	<el-col :span="24">
		          	<el-form-item label="相关产业链">
		          		<el-tag v-for="item in temp.relatedChain" :key="item" type="info">{{ item }}</el-tag>
		            </el-form-item>
	          	</el-col>
				<el-col :span="24">
					<el-form-item label="事件描述" prop="eventDescript">
						<el-input readonly v-model="temp.eventDescript" type="textarea" :rows="3" placeholder=""></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="相关资讯">
						<el-table stripe max-height="500" :data="listNewsInfo" style="width: 100%" border fit highlight-current-row v-loading="tempListLoading02">
							<el-table-column type="index" width="40" align="center"></el-table-column>
							<el-table-column prop="title" label="标题" align="center" min-width="200"></el-table-column>
							<el-table-column prop="summary" label="摘要" align="center" min-width="300"></el-table-column>
							<el-table-column prop="createTime" label="创建时间" align="center" width="100"></el-table-column>
							<el-table-column prop="updateTime" label="更新时间" align="center" width="100"></el-table-column>
							<el-table-column prop="source" label="来源" align="center"></el-table-column>
							<el-table-column label="态度" align="center" width="65">
								<template slot-scope="scope">
									<span v-if="scope.row.attitude == -1" class="tagColor" style="background-color: #4cba2a;">&nbsp;利空&nbsp;</span>
									<span v-else-if="scope.row.attitude == 0" class="tagColor" style="background-color: #c5d106;">&nbsp;中性&nbsp;</span>
									<span v-else="scope.row.attitude == 1" class="tagColor" style="background-color: red;">&nbsp;利好&nbsp;</span>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-container" style="margin-top: 10px;">
							<el-pagination background @size-change="newsSizeChange" @current-change="newsCurrentChange" :current-page.sync="newsObj.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="newsObj.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="newsTotal"></el-pagination>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="相关股票">
						<el-table stripe max-height="530" :data="listStock" style="width: 100%" border fit highlight-current-row v-loading="tempListLoading03">
							<el-table-column type="index" width="40" align="center"></el-table-column>
							<el-table-column prop="code" label="股票代码" align="center"></el-table-column>
							<el-table-column prop="name" label="股票名称" align="center"></el-table-column>
							<el-table-column label="相关度" align="center">
								<template slot-scope="scope">
									<el-rate v-model="scope.row.similar" disabled></el-rate>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-container" style="margin-top: 10px;">
							<el-pagination background @size-change="stocksSizeChange" @current-change="stocksCurrentChange" :current-page.sync="stocksObj.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="stocksObj.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="stocksTotal"></el-pagination>
						</div>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" style="text-align: center;">
			<el-button type="primary" @click="goBack">关闭</el-button>
		</div>
	</div>
</template>

<script>
  	import { eventGet, selectByIdNews, selectByIdStocks, selectByIdChains } from '@/api/events'

	export default {
		name: 'unevtInfoPreview',
		props: ['infoMsg'],
		data() {
			return {
		        temp: {
			      	createTime: "",
			      	creater: "",
			      	dataStatus: 0,
			      	eventAbs: "",
			      	eventDescript: "",
			      	eventHot: null,
			      	eventId: "",
			      	eventTitle: "",
			      	eventType: "",
			      	isOnline: "",
			      	listNews: "",
			      	relatedChain: [],
			      	listTags:[],
			      	newsNum:'',
			      	updateTime:'',
			   		updater:'',
			   		updatetime:''
		        },
		        listNewsInfo:[],
		        listStock:[],
				tempListLoading01: false,
				tempListLoading02: false,
				tempListLoading03: false,
				tempListLoading04: false,
				newsObj: {
					pageNum: 1,
					pageSize: 20,
					eventId: ''
				},
				stocksObj: {
					pageNum: 1,
					pageSize: 20,
					eventId: ''
				},
				newsTotal: null,
				stocksTotal: null,
				scStocksTotal: null,
				evtId:''
			}
		},
		created() {
			this.init()
		},
		methods: {
			getNewsList(tar) {
				this.newsObj.eventId = tar
				this.tempListLoading02 = true
				selectByIdNews(this.newsObj).then(res => {
					this.tempListLoading02 = false
					this.listNewsInfo = Object.assign([], res.Data)
					this.newsTotal = parseInt(res.total)
				})
			},
			newsSizeChange(val) {
				this.newsObj.pageSize = val
				this.getNewsList(this.evtId)
			},
			newsCurrentChange(val) {
				this.newsObj.pageNum = val
				this.getNewsList(this.evtId)
			},
			getStocksList(tar) {
				this.stocksObj.eventId = tar
				selectByIdStocks(this.stocksObj).then(res => {
					this.listStock = Object.assign([], res.Data)
					this.stocksTotal = parseInt(res.total)
				})
			},
			stocksSizeChange(val) {
				this.stocksObj.pageSize = val
				this.getStocksList(this.evtId)
			},
			stocksCurrentChange(val) {
				this.stocksObj.pageNum = val
				this.getStocksList(this.evtId)
			},
	      	getRelatedChain(tar){
		        selectByIdChains({'eventId': tar}).then(res => {
		        	this.temp.relatedChain = Object.assign([], res.Data) || []
		        })
      		},
      		init() {
      			this.evtId = this.infoMsg.eventId
				eventGet(this.infoMsg).then(res => {
					this.temp = Object.assign({}, res.Data[0])
					this.getNewsList(this.evtId)   			//相关资讯
					this.getStocksList(this.evtId)         	//相关股票
          			this.getRelatedChain(this.evtId)       	//相关产业链
					this.$nextTick(() => {
						this.$refs['dataForm'].clearValidate()
					})
				})
      		},
			goBack() {
				this.$emit('closeFile')
			}
		}

	}
</script>

<style scoped>
	.tagColor{
		color: white;
		border-radius: 5px;
	}
	.el-tag {
		margin-right: 5px;
	}
</style>